<template>
	<view class="box-day-get">
		<view class="title">
			<text class="text-left">{{ name }}</text>
			<view class="text-right" @click="open_themeColumn">
				<text>更多</text>
				<uni-icons class="deep-color" type="more"></uni-icons>
			</view>
		</view>
		<!-- 	@click="fullScreenPreviewImage(index)" -->
		<scroll-view
			@scrolltolower="scrolltolower"
			scroll-with-animation="true"
			class="box-scroll-view-image"
			scroll-x
		>
			<view class="scroll-view">
				<!-- 	<image
					@click="fullScreenPreviewImage(item.id, index)"
					v-for="(item, index) in arr_day_img_data.value"
					:key="item.id"
					:src="item.url"
					mode="aspectFill"
					lazy-load="true"
					class="the-image"
				></image> -->
				<view
					@click="fullScreenPreviewImage(item.id, index)"
					v-for="(item, index) in arr_day_img_data.value"
					:key="item.id"
					class="the-image"
				>
					<ImageLoading :src="item.url"></ImageLoading>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
import { reactive, ref, onBeforeMount, defineProps } from 'vue'
import { get_image_data_by_category, get_category_desc } from '../../../api'

const props = defineProps(['name', 'category', 'total'])
// 初始值为1
let page = 1
let total = 0

const arr_day_img_data = reactive({ value: [] })

const open_themeColumn = function () {
	let arg = '?category=' + props.category
	uni.navigateTo({
		url: '/pages/themeColumn/themeColumn' + arg
	})
}

const fullScreenPreviewImage = function (id, index) {
	let arg = '?id=' + id
	arg += '&index=' + index
	arg += '&total=' + total
	arg += '&is_small=' + 'no'
	uni.navigateTo({
		url: '/pages/fullScreenPreviewImage/fullScreenPreviewImage' + arg
	})
}

const api_get_image_data_by_category = async function (is_add = false) {
	let res = await get_image_data_by_category(page, 4, props.category)
	if (is_add) {
		arr_day_img_data.value = [...arr_day_img_data.value, ...res.data]
	} else {
		arr_day_img_data.value = res.data
	}
	page++
}

const api_get_category_desc = async function () {
	let res = await get_category_desc(props.category)
	total = res.total
}

onBeforeMount(() => {
	api_get_image_data_by_category()
	api_get_category_desc()
})

const scrolltolower = function () {
	api_get_image_data_by_category(true)
}
</script>

<style scoped lang="scss">
.box-day-get {
	margin-top: 20rpx;
	.title {
		height: 90rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.text-left {
			font-size: 32rpx;
			padding: 0 10rpx;
			color: #3e3e3e;
			font-style: italic;
			background: linear-gradient(to right, #ffb5af, #ffffff);
		}

		.text-right {
			height: 40rpx;
			font-size: 29rpx;
			border-radius: 100rpx;
			padding: 0 15rpx;
			background-color: rgba(236, 236, 236, 0.7);
			box-shadow: 0 0 30rpx $my-color1;
			color: $my-color1;
			@extend .f-c-c-n;
		}
	}

	.box-scroll-view-image {
		white-space: nowrap;
		height: 500rpx;
		.scroll-view {
			height: 100%;
			.the-image {
				display: inline-block;
				width: 240rpx;
				height: 100%;
				margin: 0 10rpx;
				border-radius: 15rpx;
				overflow: hidden;
			}
		}
	}
}
</style>
